<template>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>班级信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="serch" v-if="userstore.userinfo.roleid != 4">
        <el-input style="max-width: 600px" placeholder="输入搜索信息" v-model.trim="serchinfo">
            <template #prepend>
                <el-select placeholder="选择信息" v-model="select" style="width: 115px">
                    <el-option label="班级名称" value="cname" />
                    <el-option label="班级编号" value="classid" />
                </el-select>
            </template>
            <template #append>
                <el-button @click="seach"><el-icon>
                        <Search />
                    </el-icon></el-button>
            </template>
        </el-input>
    </div>
    <div class="info" v-if="classinfo.length != 0">
        <el-descriptions title="班级信息" border align="center">
            <el-descriptions-item :rowspan="2" :width="140" label="图标" align="center">
                <el-image style="width: 100px; height: 100px"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </el-descriptions-item>
            <el-descriptions-item label="班级名称" align="center">{{ classinfo.cname }}</el-descriptions-item>
            <el-descriptions-item label="班级编号" align="center">{{ classinfo.classid }}</el-descriptions-item>
            <el-descriptions-item label="班级人数" align="center">{{ classinfo.sum }}</el-descriptions-item>
            <el-descriptions-item label="介绍" align="center">{{ classinfo.introduce }}</el-descriptions-item>
            <el-descriptions-item label="辅导员" align="center">{{ classinfo.teacher }}</el-descriptions-item>
            <el-descriptions-item label="荣誉" align="center">
                <p v-for="(item, i) in honor" :key="i">
                    {{ item.honor }} {{ item.create_time }}
                </p>
            </el-descriptions-item>

        </el-descriptions>
    </div>
    <div v-else>
        <el-empty :image-size="200" />
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { getclassinfo } from '../../apis/class';
import { ElMessage } from 'element-plus';
// @ts-ignore
import { Userstore } from '@/stores/user.js';
const userstore = Userstore()
const serchinfo = ref<string>('')
const select = ref<any>('')
const honor = ref<any>([])
const classinfo = ref<any>([])
const seach = async () => {
    honor.value = ''
    classinfo.value = ''
    if (serchinfo.value == '' || select.value == '') return ElMessage({ type: 'warning', message: '请输入搜索的值' })
    const res = await getclassinfo({ condition: select.value, val: serchinfo.value })
    if (res.data.status != 200) return ElMessage({ type: 'error', message: '没有该数据' })
    classinfo.value = res.data.class
    honor.value = res.data.honor
}
const getstuclass = async () => {
    if (userstore.userinfo.roleid == 4) {
        const res = await getclassinfo({ condition: 'classid', val: userstore.userinfo.classid })
        console.log(res);
        if (res.data.status != 200) return ElMessage({ type: 'error', message: '没有该数据' })
        classinfo.value = res.data.class
        honor.value = res.data.honor
    }
}
onMounted(() => {
    getstuclass()
})
</script>
<style lang='scss' scoped>
.serch {
    margin-top: 15px;

    .el-button {
        color: #fff;
        background-color: #43a0ff;
    }
}
</style>